<template>
    <div>
        <a-modal
        title="事前申请"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
        :footer="false"
        width="100%"
        wrapClassName="full-modal-selectPersonnel"
        >
            <div class="reimbursement-selectPersonnel-box" v-if="visible">
                <commpVxeTable
                    :key="specialDataTableKey"
                    :config="specialDataTableConfig"
                    :columns="specialColumnsVxe"
                    :formItem="[]"
                    :isCanWrap="true"
                    ref="specialRegistrationRef"
                    @checkboxChange="specialSelectedRowKeysChange"
                    @searchEvent="specialSearchEvent"
                    @resetEvent="specialResetEvent"
                >
                    <template v-slot:externalOperations="{data}">
                        <vxe-form-item>
                            <template>
                                <a-button class="blue-btn" type="primary" @click="addSpecialReimburse('无单位派车')" icon="user-add">无单位派车</a-button>
                            </template>
                        </vxe-form-item>
                        <vxe-form-item>
                            <template>
                                <a-button class="blue-btn" type="primary" @click="addSpecialReimburse('超期产生')" icon="user-add">超期产生额外费用报销</a-button>
                            </template>
                        </vxe-form-item>
                        <vxe-form-item>
                            <template>
                                <a-button class="blue-btn" type="primary" @click="addSpecialReimburse('午休房')" icon="user-add">午休房报销</a-button>
                            </template>
                        </vxe-form-item>
                    </template>
                    <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                        <a-form layout="inline" class="search-form" >
                            <a-form-item >
                                <a-button class="blue-btn" type="primary" @click="specialEditClick(row)" icon="edit">修改</a-button>
                            </a-form-item>
                            <a-form-item >
                                <a-button class="red-btn" type="primary" @click="specialDeleteClick(row)" icon="delete">删除</a-button>
                            </a-form-item>
                        </a-form>
                    </template>
                </commpVxeTable>
            </div>
        </a-modal>
        <additionalReimbursement ref="additionalReimbursementRef" @successSpecialData="successSpecialData" /><!--新增编辑特殊事项-->
    </div>
</template>
<script>
import {
    jcyfybxddeleteFybxdTssxSq,
} from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api'
import additionalReimbursement from './additionalReimbursement'
export default {
    components:{
        commpVxeTable,
        additionalReimbursement
    },
    props:{

    },
    data(){
        return{
            visible:false,
            category:[],
            specialDataTableKey:null,
            addEditParameter:{},
            specialColumnsVxe:[{
                type: 'checkbox',
                width: 60 ,
                fixed: 'left'
            },{
                title: '申请人', //列头显示文字
                field: 'fsqr',
            },{
                title: '申请科室', //列头显示文字
                field: 'fsqks',
            },{
                title: '申请类型', //列头显示文字
                field: 'fsqlx',
            },{
                title: '项目内容', //列头显示文字
                field: 'fxmnr',
            },{
                title: '项目时间', //列头显示文字
                field: 'fxmsj',
            },{
                title: '申请日期', //列头显示文字
                field: 'fxmsj',
            },{
                title: '申请状态', //列头显示文字
                field: 'fsqzt',
            },{
                title: '操作',
                field: 'id',
                slots: { default: 'operation_btn' },
                fixed: 'right',
                width:180,
            }],
            specialDataTableConfig:{
                api: assessCheckApi.queryFybxdTssxSqPageListBysqsxid,
                rowId: 'id',
                height:window.innerHeight - 150,
                autoHidden:true,
                urlType: true,
                paramet:{
                }
            },
            formState:{},
        }
    },
    watch:{

    },
    mounted(){


    },
    methods:{
        getData(row){
            this.formState = row
            this.specialDataTableConfig.paramet = {
                fsqsxid: this.formState.fpid
            }
            this.specialDataTableKey = Date.now()
        },
        specialSelectedRowKeysChange(){

        },
        specialSearchEvent(){

        },
        specialResetEvent(){

        },
        //添加特殊报销项
        addSpecialReimburse(val){
            //console.log(val)
            this.$refs.additionalReimbursementRef.getData({
                fsxsqid: this.formState.fpid,
                lcbm: this.formState.flcmb,
                fsqlx:val,
                // sqsxid:this.fromState.sqsxid,
                // fbxdid:this.fromState.fbxdid,
                // fjbks:this.fromState.fjbks,
                // fjbr:this.fromState.fjbr,
                // fbxnrms:this.fromState.fbxnrms,
                // fbxsjms:this.fromState.fbxsjms,
            },{})
            this.$refs.additionalReimbursementRef.visible = true
        },
        successSpecialData(){
            // this.getData(this.fromState)
            this.specialDataTableKey = Date.now()
        },
        handleOk(){
            this.visible = false
        },
        handleCancel(){
            this.visible = false
        },
        specialEditClick(row){
            //console.log(row)
            this.$refs.additionalReimbursementRef.getEsitData({
                fsxsqid: this.formState.fpid,
                lcbm: this.formState.flcmb,
                ...row,
                // sqsxid:this.fromState.sqsxid,
                // fbxdid:this.fromState.fbxdid,
                // fsqlx:row.fsqlx,
                // fjbks:this.fromState.fjbks,
                // fjbr:this.fromState.fjbr,
                // fbxnrms:this.fromState.fbxnrms,
                // fbxsjms:this.fromState.fbxsjms,
                // isEide:true,
            },false)
            this.$refs.additionalReimbursementRef.visible = true
        },
        specialDeleteClick(row){
            let that = this
            this.$confirm({
                title:'您确认删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    jcyfybxddeleteFybxdTssxSq({id:row.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.successSpecialData()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                }
            })
        },
    }
}
</script>
<style lang="less">
.reimbursement-selectPersonnel-box{

}
.full-modal-selectPersonnel{
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;
    }
    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
    }
    .ant-modal-body {
        flex: 1;
        padding:8px 0;
        height: calc(100vh - 50px);
    }
}
</style>
